<template>
  <section class="image-wrapper">
    <el-button size="small" type="primary" v-if="!upload">点击上传</el-button>
    <div
      v-else
      class="upload-btn"
      :style="{backgroundImage: `url(${imgSrc || ''})`}"
      :class="{hasImage: imgSrc}"
    >
      <div v-if="imgSrc" ref="shade" class="shade-img"></div>
      <span ref="iconBtn" class="el-icon-plus"></span>
    </div>
    <input type="file" :class="{hasUrl: upload}" ref="inputFile" :name="name" :accept="accept" id="picture" @change="changePicture">
    <ul class="el-upload-list el-upload-list--picture" v-if="imgSrc && !upload">
      <li class="el-upload-list__item is-success">
        <img :src="imgSrc" alt="" class="el-upload-list__item-thumbnail">
        <a class="el-upload-list__item-name"><i class="el-icon-document"></i>{{pictureName}}</a>
        <label class="el-upload-list__item-status-label">
          <i class="el-icon-upload-success el-icon-check"></i>
        </label><i class="el-icon-close" @click="deleteImg"></i>
      </li>
    </ul>
  </section>
</template>

<script>
  export default {
    data () {
      return {
        pictureName: '',
        imgSrc: this.value,
        file: null,
        can: false
      }
    },
    props: {
      tips: {
        type: String,
        default: '注：建议上传 150*150尺寸的图片，最大10M'
      },
      name: {
        type: String,
        required: true,
        default: ''
      },
      accept: {
        type: String,
        default: 'image/gif,image/jpeg,image/jpg,image/png,image/svg,image/bmp'
      },
      value: String,
      max: [Number, String],
      upload: Boolean
    },
    watch: {
      value (data) {
        this.imgSrc = data
      },
      imgSrc (val) {
        if (val) {
          this.can = true
        }
      }
    },
    methods: {
      deleteImg () {
        this.resetImg()
        this.$emit('updateValue', '')
      },
      resetImg () {
        this.$refs.inputFile.value = ''
        this.imgSrc = ''
      },
      changePicture (e) {
        if (!e.target) return
        let a = e.target.files[0] || e.dataTransfer.files[0]
        this.file = a
        this.pictureName = a.name
        if (this.max) {
          if (a.size > this.max * 1024 * 1024) {
            return this.$message.error(`图片大小超过${this.max}M限制`)
          }
        }
        this.createImage(a)
      },
      createImage (file) {
        let reader = new FileReader()
        reader.onload = (e) => {
          this.$emit('updateValue', e.target.result)
          this.$emit('imageValue', this.file)
          this.imgSrc = e.target.result
        }
        reader.readAsDataURL(file)
      }
    },
    mounted () {
      if (this.upload) {
        this.$refs.inputFile.onmouseover = () => {
          if (this.can) {
            this.$refs.iconBtn.className = 'el-icon-plus toggle'
            this.$refs.shade.style.opacity = 1
          }
        }
        this.$refs.inputFile.onmouseleave = () => {
          if (this.can) {
            this.$refs.iconBtn.className = 'el-icon-plus'
            this.$refs.shade.style.opacity = 0
          }
        }
      }
    }
  }
</script>

<style lang="scss">
  .image-wrapper{
    width: 50%;
    /*min-width: 400px;*/
  }
#picture{
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  height: 34px;
  cursor: pointer;
}
.hasUrl{
  width: 300px;
  height: 150px !important;
}
  .upload-btn{
    width: 300px;
    height: 150px;
    border-radius: 4px;
    background-color: #fafafa;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .el-icon-plus{
      color: #999;
      font-size: 40px;
      font-weight: 900;
      border: 3px solid #999;
      border-radius: 50%;
      opacity: 0.9;
      padding: 5px;
      transition: all 0.3s linear;
      position: relative;
      z-index: 2;
    }
    .el-icon-plus.toggle{
      color: white !important;
      border: 3px solid #fff;
      opacity: 1 !important;
    }
    .shade-img{
      position: absolute;
      left:0;
      top: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,.5);
      transition: all 0.3s linear;
      opacity: 0;
    }
  }
  .upload-btn.hasImage{
    background-color: white;
    .el-icon-plus{
      opacity: 0;
    }
  }
</style>
